import React from "react";
import { ContentWrapper } from "./entrylist.style";
import img_like from "../image/like.png"
import img_com from "../image/comment.png"
function ContentContainer(){
    return(
        <ContentWrapper>
            {/* ContentContainer */}
            <div className="content-title">
                <a href="" className="title">标题</a>
            </div>
            <div className='content-main'>
                <div className="main-article">
                    <a href="">
                        <div className="article">
                        这其中的关键点就是height: 0;和padding-bottom: 50%;。
我们将元素的高度由padding撑开，由于padding是根据父元素宽度计算的，所以高度也就变成了相对父元素宽度，同时要将height设置为 0，这是为了将元素高度完全交给padding负责。
最后padding-bottom的值设为width的值一半，就可以实现高度是宽度的一半且自适应啦。
改进
光是这样写还是不够的，因为元素的height为 0，导致该元素里面再有子元素的时候，就无法正常设置高度。所以我们需要用到position: absolute;。代码如下：

作者：虾卡拉卡
链接：https://juejin.cn/post/6844903610082410504
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
                        </div>
                    </a>
                </div>
                <div className="main-img">
                    <img src="" alt="" />
                </div>
            </div>
            <div className="content-action">
                <ul className="action-list">
                    <li>
                        <img src={img_like} alt="" />
                        <span>999</span>
                    </li>
                    <li>
                        <img src={img_com} alt="" />
                        <span>666</span>
                    </li>
                </ul>
                <ul className="type-list">
                    <li>标签一</li>
                    <li>标签二</li>
                </ul>
            </div>
        </ContentWrapper>
    )
}

export default ContentContainer